<!--表格视图页 搜索条-->
<script setup>
import {toRefs, onMounted, nextTick} from 'vue'
// import useLoginStore from '@/stores/login'
// import { useCascader } from '@/hooks/use-cascader'
// import { useCommon } from '@/hooks/use-common'
import {Search} from '@element-plus/icons-vue'
import {cloneDeep} from 'lodash-es'

defineOptions({
  name: 'ViewSearchForm'
})

const modelValue = defineModel({type: Object, default: () => ({})})
const props = defineProps({
  toolList: { // 工具条,过滤
    type: Array,
    default: () => (['keyword'])
  },
  scoreStateList: { // 评审状态List
    type: Array,
    default: () => ([])
  },
  keywordWidth: { // 关键字搜索 宽度
    type: String,
    default: '260px'
  },
  labelWidth: {
    type: String,
    default: '80px'
  },
  keywordName: {
    type: String,
    default: '关键字'
  },
  keywordPlaceholder: {
    type: String,
    default: '请输入关键字'
  },
  archivedClearable: Boolean, // 归档状态是否可清空
  majorFlag: { // majorFlag,用于判断是否需要执行 on-handle-majors
    type: Number,
    default: 0
  }
})
const {toolList, scoreStateList, keywordWidth, archivedClearable, majorFlag} = toRefs(props)
const emit = defineEmits(['on-search'])

// 保存原始query 用于重置 clear 方法
let initQuery = {}
const setInitQuery = () => {
  initQuery = cloneDeep(modelValue.value)
  if (initQuery.fileName) {
    if (Object.keys(initQuery.fileName).length) fileName = JSON.stringify(initQuery.fileName)
  }
}
// 单独保存文件名,否则会变成响应式对象
let fileName = ''

/* 重置搜索栏 */
const clear = () => {
  let _initData = initQuery
  if (_initData.fileName) _initData.fileName = JSON.parse(fileName)
  Object.keys(_initData).forEach(key => {
    modelValue.value[key] = _initData[key]
  })
  emit('on-search')
}
// 判断是否存在该formItem
const isIncludes = (key) => {
  return toolList.value.includes(key)
}

onMounted(() => {
  // 因为queryInfo是拼接的pageNum、pageSize,因此需要 等dom更新后才能保存原始参数
  nextTick(() => {
    setInitQuery()
  })
})
</script>

<template>
  <ElForm class="view-search-form" ref="formRef" :model="modelValue" :label-width="labelWidth" inline @submit.prevent>
    <slot/>
    <ElFormItem prop="keyword" v-if="isIncludes('keyword')" :label="keywordName">
      <ElInput v-model="modelValue.keyword" @keyup.enter.prevent="emit('on-search')"
               @clear="emit('on-search')"
               clearable
               :placeholder="keywordPlaceholder" @change="val=>modelValue.fileName?modelValue.fileName.keyword=val:''"
               :style="{width:keywordWidth}"/>
    </ElFormItem>
    <ElFormItem>
      <ElButton :icon="Search" type="primary" plain @click="emit('on-search')">搜索</ElButton>
      <ElButton @click="clear">重置</ElButton>
    </ElFormItem>
  </ElForm>
</template>
<style lang="scss">
</style>
